// 组件的传入slot
let a1 = `<my><span slot="aaa">{{hello}}</span></my>`; // 先将组件内部的属性渲染完毕后传递给组件了

// 使用组件
let a2 = `<div><slot name="aaa"></slot></div>`;

let compiler = require("vue-template-compiler");

// 使用计算属性 先计算好 在循环
let { render: render1 } = compiler.compile(a1);
console.log(render1);

let { render: render2 } = compiler.compile(a2);
console.log(render2);

// 普通插槽的原理 就是在父组件中 将插槽的内容渲染出来 {slot:aaa, 虚拟节点}
// with(this){return _c('my',[_c('span',{attrs:{"slot":"aaa"},slot:"aaa"},[_v(_s(hello))])])}
// _t会根据具体的名字 找到对应的虚拟节点 替换掉内容
// with(this){return _c('div',[_t("aaa")],2)}  // this.$slots['aaa']

let { render: a3 } = compiler.compile(
  "<my><span slot-scope={a,b}>{{a}} {{b}}</span></my>"
);
let { render: a4 } = compiler.compile("<div><slot a=1 b=2></slot></div>");

console.log(a3, a4);

// 作用域的插槽实现原理  就是 在子组件渲染的过程中调用父组件传递的函数来渲染
// with (this) {
//   return _c("my", {
//     scopedSlots: _u([
//       {
//         key: "default",
//         fn: function ({ a, b }) { /// 父组件使用的 渲染内容 被放到了一个回调函数中
//           return _c("span", {}, [_v(_s(a) + " " + _s(b))]);
//         },
//       },// {default:fn}
//     ]),
//   });
// }
// with (this) {
//   return _c("div", [_t("default", null, { a: "1", b: "2" })], 2);
// }
